<script setup>
import { ref,reactive,computed,watch,watchEffect ,h} from "vue";
import { LoadingOutlined } from '@ant-design/icons-vue';
import { useStore } from "@/pinia";
const state=useStore()
const indicator = h(LoadingOutlined, {
	style: {
		fontSize: '12px',
		color:"rgb(209 209 209)"
	},
	spin: true,
});
const props = defineProps(['isMe','message','uid',"loading"])
</script>


<template>
<div :class="{my:props.isMe}">
	<div className="box">
			<div className="img">
				<!-- <img src="" alt=""/> -->
			</div>
		<div class="msgBox">
			<div class="username r">
				{{props.isMe?state.id:props.uid}}
			</div>
			
			<div className="msg">{{props.message}}</div>
		</div>
		<a-spin v-if="props.loading" :indicator="indicator" :spinning="true"/>
	</div>
</div>
</template>


<style scoped>
.box{
	display: flex;
	flex-direction: row;
	margin:0 1rem  .4rem  1rem;
}
.my .box{
	flex-direction: row-reverse;
}
.my .msg{
	background-color: rgb(0, 185, 0);
	color: #fff;
}
.my .msg::before{
	background-color: rgb(0, 185, 0);
	top:1rem;
	left: calc( 100% - .1rem );
	transform: rotate(45deg) translateX(-50%);

}
.msg{
	/* max-width: calc( 100% - 4rem ); */
	border-radius: 4px;
	box-sizing: border-box;
	background-color: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
	position: relative;
	margin: 0 1rem;
	padding: 10px 1rem;
	word-break: break-word;
}
.msg::before{
	content:"";
	background-color: rgb(255, 255, 255);
	width: .5rem;
	height: .5rem;
	position:absolute;
	top:1rem;
	left: -0.05rem;
	transform: rotate(45deg) translateX(-50%);
}
.img{
	background-color: #fff;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;

}
.username{
	color: rgb(206, 206, 206);
	padding: 0 1rem;
}
.my .r{
	text-align: right;
}
.msgBox{
	max-width: calc( 100% - 4rem );
}
</style>